<template>
  <div class="userEdit_box">
    <div class="form_box">
      <h2>个人信息设置</h2>
      <el-form label-width="80px" :model="userDetail">
        <div class="row">
          <div class="col-md-6">
            <el-form-item label="用户名">
              <el-input v-model="userDetail.username"></el-input>
            </el-form-item>
            <el-form-item label="绑定邮箱">
              <el-input v-model="userDetail.email"></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker
                v-model="userDetail.birthday"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="col-md-6" style="overflow: hidden">
            <el-form-item label="头像" v-if="haveUserDetail()">
              <!-- <el-avatar :size="150">
                                <img :src="backUrl + userDetail.profilePhoto" alt="">
                            </el-avatar> -->
              <UserUpload :userDetail="userDetail" />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="性别">
          <el-radio v-model="userDetail.sex" :label="true">男生</el-radio>
          <el-radio v-model="userDetail.sex" :label="false">女生</el-radio>
        </el-form-item>

        <el-form-item label="爱好">
          <el-input v-model="userDetail.hobby"></el-input>
        </el-form-item>

        <!-- <el-form-item label="爱好">
                    <el-checkbox-group v-model="userDetail.hobby">
                        <el-checkbox label="音乐" name="type"></el-checkbox>
                        <el-checkbox label="美术" name="type"></el-checkbox>
                        <el-checkbox label="科技" name="type"></el-checkbox>
                        <el-checkbox label="运动" name="type"></el-checkbox>
                        <el-checkbox label="其他" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item> -->
        <!-- <el-form-item label="开关">
                    <el-switch ></el-switch>
                </el-form-item> -->
        <el-form-item label="座右铭">
          <el-input
            v-model="userDetail.motto"
            type="textarea"
            :autosize="{ minRows: 2 }"
            maxlength="80"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input
            v-model="userDetail.introduce"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            maxlength="300"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUserDetail">更新</el-button>
          <el-button @click="toCancel">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import UserUpload from './UserUpload'
import { mapState } from 'vuex'
export default {
  inject: ['reload'],
  components: {
    UserUpload
  },
  data () {
    return {
      username: '',
      userDetailForm: {
        birthday: '',
        sex: '',
        motto: '',
        hobby: '',
        introduce: ''

      }
    }
  },
  computed: {
    ...mapState(
      {
        userDetail: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }

    )
    // userDetail () {
    //   var userDetail = this.userInfo
    //   return userDetail
    // }
  },
  methods: {
    haveUserDetail () {
      let isHave = false
      if (this.userDetail && this.userDetail.email !== '') {
        isHave = true
      }
      return isHave
    },
    // 编辑更新个人信息
    async updateUserDetail () {
      // 如果用户名发生改变，修改用户名
      if (this.username !== this.userDetail.username) {
        console.log('更新用户名')
        const { data: usernameRes } = await this.$http.get(`/user/updateName/${this.userDetail.username}`)
        console.log(usernameRes)
        if (usernameRes.code !== 200) {
          return
        }
      }

      //  修改常规资料
      const { data: res } = await this.$http.post('/user/updateInfo', {
        introduce: this.userDetail.introduce,
        sex: this.userDetail.sex,
        motto: this.userDetail.motto,
        hobby: this.userDetail.hobby,
        birthday: this.userDetail.birthday
      })
      // console.log(res)
      if (res.code !== 200) return this.$message.error('更新个人信息失败！')
      this.$message.success('更新个人信息成功！')

      // 重新获取到个人信息，存储到vuex
      this.$store.dispatch('getUserInfo')

      // 上传成功刷新页面
      window.location.reload()
      // this.reload()
    },
    // 点击取消，返回首页
    toCancel () {
      this.$router.go(-1)
    }

  },
  created () {
    this.username = this.userDetail.username
  }
}
</script>

<style lang="less" scoped>
.userEdit_box {
  .form_box {
    background: rgb(236, 243, 248);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10%;
    h2 {
      text-align: center;
      color: rgb(228, 236, 154);
      margin-bottom: 5%;
    }
    // border: 1px solid rebeccapurple;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 2% 10%;
    // width: 60%;
    .el-form {
    }
  }
}
.el-avatar {
  border: 1px solid rgb(243, 219, 190);
  background-color: rgb(252, 251, 249);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  position: relative;
  img {
    border-radius: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
